{% extends "blog/blog_post_list.html" %}
{% load playdown_tags mezzanine_tags comment_tags keyword_tags rating_tags i18n disqus_tags static event_tags %}

{% block meta_title %}{{ blog_post.meta_title }}{% endblock %}

{% block meta_keywords %}{% metablock %}
{% keywords_for blog_post as tags %}
{% for tag in tags %}{% if not forloop.first %}, {% endif %}{{ tag }}{% endfor %}
{% endmetablock %}{% endblock %}

{% block meta_description %}{% metablock %}
{{ blog_post.description }}
{% endmetablock %}{% endblock %}

{% block breadcrumb_menu %}
{{ block.super }}
<span class="active">{{ blog_post.title }}</span>
{% endblock %}

{% block title %}
<div class="mdl-card__title mdl-card--expand">
    <h2 class="mdl-card__title-text">
    Blog
    </h2>
</div>
{% endblock %}

{% block main %}
<h2 class="section--center mdl-grid mdl-cell--11-col">{{ blog_post.title }}</h2>
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp post_detail mdl-cell--11-col">
<div class="mdl-card__supporting-text">
{% block blog_post_detail_postedby %}
{% editable blog_post.publish_date %}
<span class="post-meta">
    {% trans "Posted by" %}:
    {% with blog_post.user as author %}
    <a href="{% url "blog_post_list_author" author %}" >{{ author.get_full_name|default:author.username }}</a>
    {% endwith %}
    <span>{{ blog_post.publish_date }}</span>
</span>
{% endeditable %}
{% endblock %}
{% block blog_post_detail_commentlink %}
<p>
    {% if blog_post.allow_comments %}
        {% if settings.COMMENTS_DISQUS_SHORTNAME %}
        {% else %}(<a href="#comments">{% spaceless %}
            {% blocktrans count comments_count=blog_post.comments_count %}{{ comments_count }} comment{% plural %}{{ comments_count }} comments{% endblocktrans %}
            {% endspaceless %}</a>)
        {% endif %}
    {% endif %}
</p>
{% endblock %}

{% block blog_post_detail_featured_image %}
{% if settings.BLOG_USE_FEATURED_IMAGE and blog_post.featured_image %}
<p><img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail blog_post.featured_image 600 0 %}"></p>
{% endif %}
{% endblock %}

{% block blog_post_detail_content %}

{% editable blog_post.content %}
{% markit blog_post.content as content %}
{{ content|safe }}
{% endeditable %}
</div>
{% endblock %}

<div class="mdl-card__actions mdl-card--border">
    <br />或许您还需要下面的文章:
    {% block blog_post_detail_related_posts %}
    {% if blog_post.related_posts.all %}
    <div id="related-posts">
    <ul class="list-unstyled">
    {% for post in blog_post.related_posts.all %}
     <li><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></li>
    {% endfor %}
    </ul>
    </div>
    {% endif %}

    {% endblock %}
</div>

<div class="mdl-card__actions mdl-card--border">
    {% block blog_post_detail_keywords %}
    {% keywords_for blog_post as tags %}
    {% if tags %}
    {% spaceless %}
    <p>
        <ul class="list-inline tags">
            <li>{% trans "标签" %}:</li>
            {% for tag in tags %}
            <li><a href="{% url "blog_post_list_tag" tag.slug %}">{{ tag }}</a></li>
            {% endfor %}
        </ul>
    </p>
    {% endspaceless %}
    {% endif %}
    {% endblock %}
</div>
</section>

<section class="section--center mdl-grid mdl-shadow--2dp mdl-cell--11-col recent-post">
    <div class="mdl-card__title mdl-card--border mdl-card--expand">
        <h3 class="mdl-card__title-text">关于我</h3>
    </div>
    <div class="mdl-card__supporting-text">
        <p>
        Github: <a rel="nofollow" href="https://github.com/phodal" target="_blank">@phodal</a> &nbsp;&nbsp;&nbsp;
        微博:<a rel="nofollow" href="http://weibo.com/phodal" target="_blank">@phodal</a> &nbsp;&nbsp;&nbsp;
        知乎:<a rel="nofollow" href="http://www.zhihu.com/people/phodal" target="_blank">@phodal</a> &nbsp;&nbsp;&nbsp;
        </p>

        <strong>微信公众号(Phodal)</strong>
        <br>
        <img style="border-radius: 3px;" width="178" height="178" src="{% static "phodal/images/qrcode.jpg"%}" />
    </div>
    <div class="mdl-card__actions mdl-card--border">
        <p>围观我的<a href="https://github.com/phodal/ideas" alt="phodal's ideas">Github Idea</a>墙, 也许，你会遇到心仪的项目<br /></p>
        QQ技术交流群: 321689806
    </div>
</section>


{% block ads %}
{% ads %}
{% for ad in ads %}
    {% if ad %}
    <section class="section--center mdl-grid mdl-shadow--2dp mdl-cell--11-col recent-post">
        <div class="mdl-card__title mdl-card--border mdl-card--expand">
            {% editable ad.title %}
            <h3 class="mdl-card__title-text">{{ ad.title }} </h3>
            {% endeditable %}
        </div>
        {% editable ad.content %}
        <div class="mdl-card__supporting-text">{{ ad.content |richtext_filters|safe }}</div>
        {% endeditable %}
        <div class="mdl-card__actions mdl-card--border">
            {% editable ad.url %}
            详情见: <a href="{{ ad.url }}">{{ ad.url }}</a>
            {% endeditable %}
        </div>
    </section>
    {% endif %}
{% endfor %}
{% endblock %}

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.phodal.com/amp/{{ blog_post.slug}}/"
  },
  "headline": "{{ blog_post.title }}",
  "datePublished": "{{blog_post.publish_date}}",
  "dateModified": "{{blog_post.updated}}",
  "author": {
    "@type": "Person",
    "name": "Phodal"
  },
"image": {
    "@type": "ImageObject",
    "url": "https://www.phodal.com/static/phodal/images/phodal.jpg",
    "height": 320,
    "width": 320
  },
  "publisher": {
    "@type": "Organization",
    "name": "Phodal",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.phodal.com/static/phodal/images/publisher-logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "{{ blog_post.description }}"
}
</script>

{% block blog_post_detail_comments %}
{% if blog_post.allow_comments %}{% comments_for blog_post %}{% endif %}
{% endblock %}
{% endblock %}

{% block right_panel %}
{% include "blog/includes/filter_panel_without_month.html" %}
{% endblock %}
